<template>
  <div>
    <div class="search">
      <!--双向数据绑定v-model 将搜索词和数据进行绑定-->
      <input class="search-input" v-model="keyword" type="text" placeholder="输入城市名或拼音">
    </div>
    <!--search-content里面的内容显示与否 由一个变量 keyword 来决定-->
    <div class="search-content" ref="sous" v-show="keyword">
      <ul>
        <!--将循环遍历输出的result的数据存储到list 并在此进行页面数据的更新展示-->
        <li class="search-item border-bottom" v-for="item of list" v-bind:key="item.id" @click="handleCityClick(item.name)">{{item.name}}</li>
        <!--如果list长度为0的时候 就显示下面的提示语 v-show="!list.length"-->
        <li class="search-item border-bottom" style="text-align: center;" v-show="hasNoData">没有找到匹配的数据项</li>
      </ul>
    </div>
  </div>
</template>

<script>
    import Bscroll from 'better-scroll'
    export default {
        name: "CitySearch",
        props: { // 这个属性的定义 用于子组件接收父组件传递的值
          cities: Object,
        },
        data () {
          return {
            keyword:'', //定义一个双向绑定的数据
            list:[],
            timer: null  //定义一个节流函数的timer
          }
        },
      watch: {//监听器
        keyword () {
          //节流函数
          if (this.timer) {
            clearTimeout(this.timer)
          }
          //如果搜索词不存在 就将存储在list的搜索数据变成空数组
          if (!this.keyword) {//解决清除搜索词后 数据还在页面显示
            this.list = []
            return
          }

          this.timer = setTimeout(() => {//隔着100毫秒之后执行下面的箭头函数
            const result = []
            for (let i in this.cities) {
              this.cities[i].forEach((value) => {//将ABCD里面的每一个数组再次进行遍历
                //如果从spell、name里面能搜索到关键词 就把这一项添加到 result 这个空数组中存储
                if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1) {
                  result.push(value)
                }
              })}
            this.list = result}, 100)
        }
      },
      //生命周期函数 当点击城市的时候 actions会被实时派发
      methods: {
        handleCityClick (city) {
          // this.$store.dispatch('changeCity',city)
          this.$store.commit('changeCity',city)
          //项目中引用了路由 那每个组件里都有一个 $router 实例属性
          this.$router.push('/')  //选中城市之后就跳转到首页
        }
      },
      //使用下面的生命周期钩子函数来实现页面的局部滚动
      mounted () {
          //创建一个scroll 并在里面传入DOM元素或者选择器进来 ref="sous"
          this.scroll = new Bscroll(this.$refs.sous)
      },
      computed: {//计算属性
        hasNoData () {
          return !this.list.length
        }
      },
    }
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .search
    height: .72rem
    padding: 0 .1rem
    background: $bgColor
    .search-input
      box-sizing: border-box
      width: 100%
      height: .62rem
      padding: 0 .1rem
      line-height: .62rem
      text-align: center
      border-radius: .06rem
      color: #666
      border none;
  .search-content
    z-index: 1
    overflow: hidden
    position: absolute
    top: 1.58rem
    left: 0
    right: 0
    bottom: 0
    background: #eee
    .search-item
      line-height: .62rem
      padding-left: .2rem
      background: #fff
      color: #666
</style>
